<template>
    <div class="successfullyshared">
        <div class="yanhua">
            <canvas class="yanhua" ref="confettiCanvas"></canvas>
        </div>
        <!-- <div @click="goteturn" class="successfullysharedclose"><i class="el-icon-circle-close"></i></div>
        <div class="alertisshow" v-show="alertisshow">
            <div class="alertbox">
                <img class="alertbox-img" src="@/assets/images/red/alertisshow.png" alt="">
            </div>
            <div class="ischoose">
                <div class="istrue" @click="abandon">
                    <img class="istrue-img" src="@/assets/images/red/alertisshow_abandon.png" alt="">
                </div>
                <div class="isfalse" @click="use">
                    <img class="isfalse-img" src="@/assets/images/red/alertisshow_use.png" alt="">
                </div>
            </div>
        </div> -->
        <div class="imgsuccess">
            <img class="imgsuccess-img" v-if="cardTypebg == 0"
                src="https://anxd2.oss-cn-shanghai.aliyuncs.com/redPacket/img/share_success.jpg" alt="">
            <img class="imgsuccess-img" v-if="cardTypebg == 1"
                src="https://anxd2.oss-cn-shanghai.aliyuncs.com/redPacket/img/share_success_1.jpg" alt="">
            <div id='main' v-if="cardTypebg == 0">
                <!--  <div class="itemnum"><span>.</span></div> -->
                <div class="itemnum"><span
                        style=" display: inline-block; width: 10px; height: 10px; border-radius: 50%; position: relative;  left: -7%; background: #fff099;"></span>
                </div>
                <div v-for="(val, index) in numberArr" :key="index">
                    <div style="width:60px;height:80px">
                        <div class="numberScrollPar" style="color:#fff099">
                            <div v-for="i in 10" :key="i">
                                <div class="child">{{ i - 1 }}</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div style="font-size: 29px; color: #fff099; position: relative; top: 33px; font-weight: bold;">元</div>
            </div>
            <div id='main' v-if="cardTypebg == 1">
                <!--  <div class="itemnum"><span>.</span></div> -->
                <div class="itemnum"><span style=" display: inline-block; width: 10px; height: 10px; border-radius: 50%;  background: red; display: inline-block; position: relative;
    left: -7%;"></span>
                </div>
                <div v-for="(val, index) in numberArr" :key="index">
                    <div style="width:60px;height:80px">
                        <div class="numberScrollPar" style="color:red">
                            <div v-for="i in 10" :key="i">
                                <div class="child">{{ i - 1 }}</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div style="font-size: 29px; color: red; position: relative; top: 33px; font-weight: bold;">元</div>
            </div>

            <!-- <div class="text-money" v-if="cardTypebg == 0"><span class="money">{{ money }}</span><span
                    class="moneytext">元</span> </div>
            <div class="text-money" v-if="cardTypebg == 1">
                <span class="money1">{{ money }}</span>
                <span class="moneytext" style="color: red; font-weight: bold;">元</span>
            </div> -->

            <div class="fullysharedbtn" @click="share">
                <img class="fullysharedbtnimg" src="@/assets/images/red/shearsuccess_btn.png" alt="">
            </div>
        </div>
    </div>
</template>
<script>
import confetti from 'canvas-confetti';
import { redpacket, receiveredpacket } from '@/api/http.js'
export default {
    data() {
        return {
            redPacketType: '3',
            redPacketId: '',
            cardType: '',
            alertisshow: false,
            cardTypebg: '',
            money: '0.00',
            numberArr: [0, 0, 0],
            time:'',
            settime:'',
            yanhuatime:'',
        }
    },
    methods: {
        startConfetti() {
            confetti.create(this.$refs.confettiCanvas, {
                resize: true,
                useWorker: true,
            })({ particleCount: 200, spread: 200 });
        },
        goteturn() {
            this.alertisshow = true
        },
        abandon() {
            this.alertisshow = false
            this.cardType = 3
            this.getreceiveredpacket(this.redPacketId, this.cardType)
            this.$router.push({
                path: "/bannersearch"
            })
        },
        use() {
            this.alertisshow = false
        },
        share() {
            console.log('收下红包')
            this.cardType = 1

            this.getreceiveredpacket(this.redPacketId, this.cardType)

        },
        getredpacket() {
            redpacket(this.redPacketType).then(res => {
                if (res.code != 500) {

                    console.log(res)
                    this.redPacketId = res.data.redPacketId
                    this.cardTypebg = res.data.cardType
                    // let x = 0
                    // let y = 0
                    // let z = 0
                    // let time
                    // time = setInterval(() => {
                    //     x = Math.floor(Math.random() * 10)
                    //     y = Math.floor(Math.random() * 10)
                    //     z = Math.floor(Math.random() * 10)
                    //     this.money = x + '.' + y + z
                    // }, 100)
                    const element = document.getElementsByClassName('numberScrollPar');
                    console.log(element.length)
                    const text = res.data.randomAmount
                    const chars = text.split('');
                    console.log(chars)
                    this.numberArr[0] = chars[0]
                    this.numberArr[1] = chars[1]
                    this.numberArr[2] = chars[2]
                    console.log(this.numberArr)
                    for (let i = 0; i < element.length; i++) {
                        const name = 'numberScroll_' + this.numberArr[i];
                        element[i].classList.add(name);
                    }

                 this.time =   setTimeout(() => {
                        // clearInterval(time)
                        // this.money = res.data.amount
                        this.yanhuatime = setInterval(() => {
                            this.startConfetti()
                        }, 1000)
                    this.settime =    setTimeout(() => {
                            clearInterval( this.yanhuatime)
                        }, 3000)
                    }, 1000);


                } else {
                    this.$router.push({
                        path: "/completeactivity"
                    })
                }
            })
        },
        getreceiveredpacket(redPacketId, cardType) {
            // let obj = {redPacketId:this.redPacketId}
            receiveredpacket(redPacketId, cardType).then(res => {
                console.log(res, '收下红包')
                if (res.code == 200) {
                    if (this.$route.query.id == 1) {
                        this.$router.push({
                            path: "/result"
                        })
                    } else {
                        this.$router.push({
                            path: "/bannersearch"
                        })
                    }
                }
            })
        }
    },
    created() {
        this.getredpacket()
    },
    beforeDestroy(){
        clearTimeout(this.time)
        clearTimeout(this.settime)
        clearInterval( this.yanhuatime)
    }
}
</script>
<style>
.successfullyshared {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
}

.yanhua {
    width: 100%;
    height: 100%;
    position: absolute;
}

.successfullysharedclose {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 36px;
    width: 45px;
    height: 45px;
    color: #fff;
    text-align: center;
    line-height: 45px;
}

.imgsuccess {

    width: 100%;
    height: 100%;
}

.imgsuccess-img {
    width: 100%;
    height: 100%;
}

.text-money {
    width: 375px;
    position: absolute;
    top: 59%;
    text-align: center;
    /* left: 50%;
    transform: translateX(-50%); */
}

.money {
    color: #fff099;
    font-size: 90px;
    font-weight: bold;
    /* box-shadow: 0 0 0 ; */
}

.money1 {
    color: red;
    font-size: 90px;
    font-weight: bold;
    /* box-shadow: 0 0 0 ; */
}

.moneytext {
    font-size: 30px;
    color: #fff;
    font-weight: bold;
}

.fullysharedbtn {
    position: absolute;
    left: 20%;
    bottom: 20px;
    width: 216px;
    height: 85px;
}

.fullysharedbtnimg {
    width: 100%;
    height: 100%;
}

.alertisshow {
    position: absolute;
    margin-top: 60px;
    height: 100%;
    z-index: 99;
}

.alertbox {
    width: 375px;
    height: 434px;
}

.alertbox-img {
    width: 100%;
    height: 100%;
}

.ischoose {
    position: relative;
    top: -135px;
}

.istrue {
    width: 375px;
    height: 43px;
}

.istrue-img {
    width: 100%;
    height: 100%;
}

.isfalse {
    width: 375px;
    height: 57px;
}

.isfalse-img {
    width: 100%;
    height: 100%;
}


#main {
    width: 70%;
    height: 80px;
    z-index: 4;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 60%;
    /* background: white; */
    color: #f9583a;
    font-size: 80px;
    overflow: hidden;
    font-weight: bold;
    display: flex;
    justify-content: center;
}

.itemnum {
    position: relative;
    left: 56px;
    top: -4px;
}

.numberScrollPar {
    width: 100%;
    height: 100%;
}

.child {
    width: 40px;
    height: 80px;
    line-height: 80px;
    text-align: center;
}

@keyframes numberScroll1 {
    from {
        transform: translateY(0px);
    }

    to {
        transform: translateY(-80px);
    }
}

@-webkit-keyframes numberScroll1 {
    from {
        transform: translateY(0px);
    }

    to {
        transform: translateY(-80px);
    }
}

.numberScroll_1 {
    animation: numberScroll1 0.5s;
    -webkit-animation: numberScroll1 0.5s;
    animation-fill-mode: both;
}

@keyframes numberScroll2 {
    from {
        transform: translateY(0px);
    }

    to {
        transform: translateY(-160px);
    }
}

@-webkit-keyframes numberScroll2 {
    from {
        transform: translateY(0px);
    }

    to {
        transform: translateY(-160px);
    }
}

.numberScroll_2 {
    animation: numberScroll2 1s;
    -webkit-animation: numberScroll2 1s;
    animation-fill-mode: both;
}

@keyframes numberScroll3 {
    from {
        transform: translateY(0px);
    }

    to {
        transform: translateY(-240px);
    }
}

@-webkit-keyframes numberScroll3 {
    from {
        transform: translateY(0px);
    }

    to {
        transform: translateY(-240px);
    }
}

.numberScroll_3 {
    animation: numberScroll3 1.5s;
    -webkit-animation: numberScroll3 1.5s;
    animation-fill-mode: both;
}

@keyframes numberScroll4 {
    from {
        transform: translateY(0px);
    }

    to {
        transform: translateY(-320px);
    }
}

@-webkit-keyframes numberScroll4 {
    from {
        transform: translateY(0px);
    }

    to {
        transform: translateY(-320px);
    }
}

.numberScroll_4 {
    animation: numberScroll4 2s;
    -webkit-animation: numberScroll4 2s;
    animation-fill-mode: both;
}

@keyframes numberScroll5 {
    from {
        transform: translateY(0px);
    }

    to {
        transform: translateY(-400px);
    }
}

@-webkit-keyframes numberScroll5 {
    from {
        transform: translateY(0px);
    }

    to {
        transform: translateY(-400px);
    }
}

.numberScroll_5 {
    animation: numberScroll5 2.5s;
    -webkit-animation: numberScroll5 2.5s;
    animation-fill-mode: both;
}

@keyframes numberScroll6 {
    from {
        transform: translateY(0px);
    }

    to {
        transform: translateY(-480px);
    }
}

@-webkit-keyframes numberScroll6 {
    from {
        transform: translateY(0px);
    }

    to {
        transform: translateY(-480px);
    }
}

.numberScroll_6 {
    animation: numberScroll6 1.2s;
    -webkit-animation: numberScroll6 1.2s;
    animation-fill-mode: both;
}

@keyframes numberScroll7 {
    from {
        transform: translateY(0px);
    }

    to {
        transform: translateY(-560px);
    }
}

@-webkit-keyframes numberScroll7 {
    from {
        transform: translateY(0px);
    }

    to {
        transform: translateY(-560px);
    }
}

.numberScroll_7 {
    animation: numberScroll7 1.4s;
    -webkit-animation: numberScroll7 1.4s;
    animation-fill-mode: both;
}

@keyframes numberScroll8 {
    from {
        transform: translateY(0px);
    }

    to {
        transform: translateY(-640px);
    }
}

@-webkit-keyframes numberScroll8 {
    from {
        transform: translateY(0px);
    }

    to {
        transform: translateY(-640px);
    }
}

.numberScroll_8 {
    animation: numberScroll8 1.6s;
    -webkit-animation: numberScroll8 1.6s;
    animation-fill-mode: both;
}

@keyframes numberScroll9 {
    from {
        transform: translateY(0px);
    }

    to {
        transform: translateY(-720px);
    }
}

@-webkit-keyframes numberScroll9 {
    from {
        transform: translateY(0px);
    }

    to {
        transform: translateY(-720px);
    }
}

.numberScroll_9 {
    animation: numberScroll9 1.8s;
    -webkit-animation: numberScroll9 1.8s;
    animation-fill-mode: both;
}

@-webkit-keyframes numberScroll0 {
    0% {
        transform: translateY(0px);
    }

    80% {
        transform: translateY(-720px);
    }

    100% {
        transform: translateY(0px);
    }
}

.numberScroll_0 {
    animation: numberScroll0 1.6s;
    -webkit-animation: numberScroll0 1.6s;
    animation-fill-mode: both;
}
</style>